<template>
	<view>
		<cmd-nav-bar title="工作台"></cmd-nav-bar>
		<cmd-page-body type="top">
				<uni-section title="通知公告" type="line">
					<!-- 公告 -->
					<uni-notice-bar
						:text="noticeText || '暂无公告'"
						moreText="更多"
						:single="true"
						:scrollable="true"
						:showGetMore="true"
						:showIcon="true"
						@getmore="getMore"/>
				</uni-section>
				<uni-section title="系统功能" type="line">
					<uni-grid :column="4" :show-border="false" @change="change">
						<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
							<view class="grid-item-box">
								<image :src="item.url" class="image" mode="aspectFill" />
								<text class="text">{{ item.text }}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</uni-section>
		</cmd-page-body>
		<!-- 底部导航栏 -->
		<tabbar :valueModel="1"></tabbar>
	</view>
</template>

<script>
	import {getNotice} from '@/common/api'
	import cmdNavBar from "@/components/cmd-nav-bar/cmd-nav-bar.vue"
	import cmdPageBody from "@/components/cmd-page-body/cmd-page-body.vue"
	export default {
		components:{
			 cmdNavBar,
			 cmdPageBody
		},
		data() {
			return {
				// 公告
				noticeText: "",
				list: [{
						url: '/static/img/menu/c1.png',
						text: '敬请期待'
					},
					{
						url: '/static/img/menu/c2.png',
						text: '敬请期待'
					},
					{
						url: '/static/img/menu/c3.png',
						text: '敬请期待'
					},
					{
						url: '/static/img/menu/c4.png',
						text: '敬请期待'
					},
					{
						url: '/static/img/menu/c5.png',
						text: '敬请期待'
					},
					{
						url: '/static/img/menu/c6.png',
						text: '敬请期待'
					},
					{
						url: '/static/img/menu/c7.png',
						text: '敬请期待'
					},
					{
						url: '/static/img/menu/c8.png',
						text: '敬请期待'
					}
				]
			}
		},
		onLoad() {
			// 初始化数据
			this.initData();
		},
		methods: {
			initData() {
				// 请求通知公告数据
				getNotice().then(res => {
					if (res.code == 200) {
						this.noticeText = res.data;
					} 
				})
			},
			getMore() {
				uni.showToast({
					title: '点击查看更多',
					icon: 'none'
				});
			},
			change() {
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				});
			}
		}
	}
</script>


<style lang="scss">
	.image {
		width: 50rpx;
		height: 50rpx;
	}

	.text {
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>
